<template>
  <BasicModal
    v-bind="$attrs"
    :showFooter="true"
    :showCancelBtn="false"
    @ok="closeModal()"
    @register="registerModal"
    width="900px"
  >
    <template #title>
      <Icon icon="ant-design:file-text-outlined" class="pr-1 m-1" />
      <span>平台日志详情</span>
    </template>
    <div v-if="record" class="log-detail">
      <a-descriptions :column="2" bordered size="small">
        <a-descriptions-item label="日志类型">
          <Tag :color="getLogTypeColor(record.logType)">
            {{ getLogTypeText(record.logType) }}
          </Tag>
        </a-descriptions-item>
        <a-descriptions-item label="日志级别">
          <Tag v-if="record.logLevel" :color="getLogLevelColor(record.logLevel)">
            {{ getLogLevelText(record.logLevel) }}
          </Tag>
          <span v-else>-</span>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ formatTime(record.createdTime) }}</a-descriptions-item>
        <a-descriptions-item label="发生时间">{{ formatTime(record.occurTime) }}</a-descriptions-item>
        <a-descriptions-item label="用户ID">{{ record.userId?.id || '-' }}</a-descriptions-item>
        <a-descriptions-item label="用户名称">{{ record.userName || '-' }}</a-descriptions-item>
        <a-descriptions-item label="租户ID">{{ record.tenantId?.id || '-' }}</a-descriptions-item>
        <a-descriptions-item label="业务ID">{{ record.businessId || '-' }}</a-descriptions-item>
        <a-descriptions-item label="IP地址">{{ record.ipAddress || '-' }}</a-descriptions-item>
        <a-descriptions-item label="状态">{{ record.status || '-' }}</a-descriptions-item>
        <a-descriptions-item label="是否成功">
          <Tag :color="record.successful ? 'green' : 'red'">
            {{ record.successful ? '成功' : '失败' }}
          </Tag>
        </a-descriptions-item>
        <a-descriptions-item label="敏感操作">
          <Tag :color="record.sensitiveOperation ? 'orange' : 'default'">
            {{ record.sensitiveOperation ? '是' : '否' }}
          </Tag>
        </a-descriptions-item>
        <a-descriptions-item label="日志ID" :span="2">{{ record.id?.id }}</a-descriptions-item>
        <a-descriptions-item label="操作内容" :span="2">
          <div class="message-content">{{ record.operationContent }}</div>
        </a-descriptions-item>
        <a-descriptions-item label="操作详情" :span="2" v-if="record.operationDetails">
          <div class="message-content">{{ record.operationDetails }}</div>
        </a-descriptions-item>
        <a-descriptions-item label="操作参数" :span="2" v-if="record.operationParams">
          <pre class="json-content">{{ record.operationParams }}</pre>
        </a-descriptions-item>
        <a-descriptions-item label="状态转换" :span="2" v-if="record.statusTransition">
          <div class="message-content">{{ record.statusTransition }}</div>
        </a-descriptions-item>
        <a-descriptions-item label="异常信息" :span="2" v-if="record.exceptionInfo">
          <pre class="json-content">{{ record.exceptionInfo }}</pre>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup name="ViewsTbPlatformLogDetail">
  import { ref } from 'vue';
  import { Tag, Descriptions, Divider } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { getPlatformLogById, PlatformLog, LogType, LogLevel } from '/@/api/tb/platformLog';
  import dayjs from 'dayjs';

  const ADescriptions = Descriptions;
  const ADescriptionsItem = Descriptions.Item;
  const ADivider = Divider;

  const emit = defineEmits(['success', 'register']);

  const { showMessage } = useMessage();
  const record = ref<PlatformLog | null>(null);

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    try {
      setModalProps({ loading: true });
      record.value = await getPlatformLogById(data.id.id);
    } catch (error: any) {
      showMessage(`获取日志详情失败: ${error?.message || '未知错误'}`, 'error');
    } finally {
      setModalProps({ loading: false });
    }
  });

  function getLogTypeText(type: LogType): string {
    const typeMap = {
      [LogType.EXCEPTION_LOG]: '异常日志',
      [LogType.BUSINESS_LOG]: '业务日志',
      [LogType.AUDIT_LOG]: '审计日志',
      [LogType.OPERATION_LOG]: '操作日志',
    };
    return typeMap[type] || type;
  }

  function getLogTypeColor(type: LogType): string {
    const colorMap = {
      [LogType.EXCEPTION_LOG]: 'red',
      [LogType.BUSINESS_LOG]: 'blue',
      [LogType.AUDIT_LOG]: 'purple',
      [LogType.OPERATION_LOG]: 'green',
    };
    return colorMap[type] || 'default';
  }

  function getLogLevelText(level: LogLevel | string): string {
    const levelMap = {
      CRITICAL: '紧急告警',
      WARNING: '警告',
      INFO: '信息',
    };
    return levelMap[level as string] || String(level);
  }

  function getLogLevelColor(level: LogLevel | string): string {
    const colorMap = {
      CRITICAL: 'red',
      WARNING: 'orange',
      INFO: 'blue',
    };
    return colorMap[level as string] || 'default';
  }

  function formatTime(timestamp: number): string {
    return dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
  }
</script>

<style lang="less" scoped>
  .log-detail {
    .message-content,
    .text-content,
    .url-content {
      word-break: break-word;
      white-space: pre-wrap;
    }

    .json-content {
      background-color: #f5f5f5;
      padding: 12px;
      border-radius: 4px;
      font-size: 12px;
      font-family: 'Courier New', monospace;
      max-height: 300px;
      overflow: auto;
      margin: 0;
    }

    .data-comparison {
      margin-top: 20px;

      .comparison-container {
        display: flex;
        gap: 16px;
        align-items: stretch;

        .comparison-column {
          flex: 1;

          h4 {
            margin: 0 0 8px 0;
            font-size: 14px;
            font-weight: 600;
            color: #333;
          }

          .json-content {
            height: 100%;
            min-height: 200px;
          }
        }

        .comparison-divider {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #1890ff;
        }
      }
    }
  }
</style>
